<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="keywords" content="jquery,ui,easy,easyui,web">
		<meta name="description" content="easyui help you build your web page easily!">
		<link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css" />

		<link rel="stylesheet" type="text/css" href="../../../layui_exts/easyTreeGrid/easyui_green.css" />
	</head>

	<body>

		<table id="tt"></table>
		<script src="../../../layui/layui.js"></script>
		<script>
			layui.config({
				base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
			}).extend({
				easyTreeGrid: 'easyTreeGrid/easyTreeGrid'
			}).use(['easyTreeGrid'], function(){
				var jQuery = layui.jquery,
						$ = jQuery,
						layer = layui.layer,
						easyTreeGrid = layui.easyTreeGrid;
				let rightmenu_ = layui.tabrightmenu;
				form = layui.form;
				easyTreeGrid('#tt').treegrid({
					iconCls: 'icon-ok',
					rownumbers: true,
					animate: true,
					collapsible: true,
					fitColumns: true,
					url: 'data/data3.json',
					method: 'get',
					idField: 'id',
					treeField: 'name',
					pagination: true,
					pageSize: 2,
					pageList: [2, 5, 10],
					onContextMenu: onContextMenu,
					fit: true,

					columns: [
						[{
							title: '名称',
							field: 'name',
							width: '78%'
						}, {
							title: '操作',
							align: 'center',
							field: 'id',
							formatter: function(val, row) {
								var html = "";
								html += '<button class="layui-btn layui-btn-primary layui-btn-sm save"><i class="layui-icon layui-icon-add-1"></i>添加</button>';
								html += '<button class="layui-btn layui-btn-primary layui-btn-sm edit"><i class="layui-icon">&#xe642;</i>编辑</button>';
								html += '<button class="layui-btn layui-btn-primary layui-btn-sm delete"><i class="layui-icon">&#xe640;</i>删除</button>';
								return html;
							},
							width: '20%'
						}]
					]
				});
				var editingId;
				$("body").on('click', ".save", function() {
					if (editingId != undefined) {
						easyTreeGrid('#tt').treegrid('select', editingId);
						return;
					}
					var row = easyTreeGrid('#tt').treegrid('getSelected');
					if (row) {
						alert(row.name)
					}
				});

				$("body").on('click', ".edit", function() {
					if (editingId != undefined) {
						easyTreeGrid('#tt').treegrid('select', editingId);
						return;
					}
					var row = easyTreeGrid('#tt').treegrid('getSelected');
					if (row) {
						alert(row.name)
					}
				});
				$("body").on('click', ".delete", function() {
					if (editingId != undefined) {
						easyTreeGrid('#tt').treegrid('select', editingId);
						return;
					}
					var row = easyTreeGrid('#tt').treegrid('getSelected');
					if (row) {
						alert(row.name)
					}
				});

				function onContextMenu(e, row) {

					e.preventDefault();
//					alert(e.pageX+"==="+e.pageY)

					$(this).treegrid('select', row.id);
					$(".datagrid").contextMenu({
						width: 110, // width
						itemHeight: 30, // 菜单项height
						bgColor: "#333", // 背景颜色
						color: "#fff", // 字体颜色
						fontSize: 12, // 字体大小
						hoverBgColor: "#99CC66", // hover背景颜色
						target: function(ele) { // 当前元素
							console.log(ele);
						},
						menu: [{ // 菜单项
							text: "新增",
							icon: "layui-icon layui-icon-add-1",
							callback: function() {
								alert("新增");
							}
						}, { //
							text: "新增下级",
							icon: "layui-icon layui-icon-down",
							callback: function() {
								alert("新增");
							}
						}, {
							text: "编辑",
							icon: "layui-icon layui-icon-edit",
							callback: function() {
								alert("删除");
							}
						}, {
							text: "删除",
							icon: "layui-icon layui-icon-delete",
							callback: function() {
								alert("删除");
							}
						}

						]
						,pageX:e.pageX
						,pageY:e.pageY
					});
				}
			});

		</script>

	</body>

</html>